<template>
  <div>
    <div class="wb-main">
      <div class="wb-header">

        <el-input v-model="formData.searchValue" clearable class="wb-header-item" placeholder="请输入客户名称或者税号" />

        <el-button size="mini" class="wb-header-btn" @click="onSearchBtn">搜索</el-button>
      </div>
      <div class="wb-table-wrap">
        <el-table
          class="wb-table"
          border
          :v-loading="loading"
          :data="dataSource"
        >
          <el-table-column label="序号" type="index" width="90px" />
          <el-table-column label="客户code" type="code" />
          <el-table-column label="店铺名称" prop="name" min-width="100px" show-overflow-tooltip />
          <el-table-column label="省市区" align="center">
            <template slot-scope="scope">
              {{ scope.row.province+scope.row.city +scope.row.region }}
            </template>
          </el-table-column>
          <el-table-column label="具体地址" prop="address" show-overflow-tooltip />
          <el-table-column label="店铺联系人" prop="contact" show-overflow-tooltip />

          <el-table-column label="法人" prop="legalPerson" show-overflow-tooltip />

          <el-table-column label="身份证正面照" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 30px; height: 30px"
                :src="jointURL(scope.row.idCardPositive)"
                :preview-src-list="[jointURL(scope.row.idCardPositive)]"
              />
            </template>
          </el-table-column>

          <el-table-column label="身份证反面照" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 30px; height: 30px"
                :src="jointURL(scope.row.idCardBack)"
                :preview-src-list="[jointURL(scope.row.idCardBack)]"
              />
            </template>
          </el-table-column>
          <el-table-column label="身份证号" prop="idCard" show-overflow-tooltip />
          <el-table-column label="身份证有效期" prop="idCardPeriod" show-overflow-tooltip />

          <el-table-column label="营业执照" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 30px; height: 30px"
                :src="jointURL(scope.row.license)"
                :preview-src-list="[jointURL(scope.row.license)]"
              />
            </template>
          </el-table-column>
          <el-table-column label="税号" prop="taxNumber" show-overflow-tooltip />
          <el-table-column label="营业执照有效期" prop="licensePeriod" show-overflow-tooltip />

          <el-table-column
            label="操作"
            fixed="right"
            align="center"
          >
            <template slot-scope="{row}">
              <el-button type="text" style="fontSize:14px" size="small" @click="operationBtn(row,1)">审批</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination-container">
          <el-pagination
            v-if="page.total>10"
            :page-sizes="[10, 50, 100, 200]"
            :current-page.sync="page.pageNum"
            :page-size="page.size"
            :total="page.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { pendingApprovalList, customerPending } from '@/api/customer'
import { status } from 'nprogress'
export default {
  data() {
    return {
      formData: {
        searchValue: ''
      },
      page: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      dataSource: [],
      loading: false
    }
  },
  mounted() {
    this.getListData()
  },
  methods: {
    jointURL(url) {
      return process.env.VUE_APP_BASE_API + url
    },
    getListData() {
      const formData = {
        ...this.page,
        ...this.formData
      }
      this.loading = true
      pendingApprovalList(formData).then((res) => {
        this.loading = false
        const records = res.data.records
        this.dataSource = records
        this.page.total = res.data.total
      }).catch(() => {
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.page = {
        ...this.page,
        pageNum: 1,
        pageSize: val
      }
      this.getListData()
    },
    handleCurrentChange(val) {
      this.page = {
        ...this.page,
        pageNum: val
      }
      this.getListData()
    },
    operationBtn(row, type) {
      const data = {
        status: 1,
        id: row.id
      }
      this.$confirm('是否同意审核', '温馨提示', { confirmButtonText: '同意', 'cancelButtonText': '驳回' }).then(() => {
        customerPending(data).then(() => {
          this.onSearchBtn()
          this.$message.success('审批同意成功')
        })
      }).catch(() => {
        data.status = 2
        customerPending(data).then(() => {
          this.onSearchBtn()
          this.$message.success('审批驳回成功!')
        })
      })
    },
    onSearchBtn() {
      this.page.pageNum = 1
      this.getListData()
    }
  }
}

</script>

<style lang="scss" scoped>

</style>
